{% extends "base.html" %}
{% block page_title %}Add Project - Step {{ wizard.steps.step1 }}{% endblock %}

{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block head %}
{{ wizard.form.media }}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="error-messages">{{ wizard.non_form_errors }}</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="cardface">
        <form action="." method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ wizard.management_form }}

          <h1>Advanced Settings</h1>
          <div class="form-group">
            <div class="panel panel-default" id="al_tab">
              <div class="panel-heading">
                <h5 class="panel-title">
                  <a data-toggle="collapse" href="#al-panel" class="accordion-toggle">
                    Active Learning
                  </a>
                </h5>
              </div>
              <div id="al-panel" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div>
                  {{ wizard.form.use_active_learning }} Use Active Learning to select data to label
                  </div>
                  <div id="choose_method_box">
                    {% for radio in wizard.form.learning_method %}
                    <div class="choose_method" name = "al_choice" id={{radio.value}}>
                      {{radio}}
                    </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h5 class="panel-title">
                  <a data-toggle="collapse" href="#c-panel" class="accordion-toggle">
                    Model Selection
                  </a>
                </h5>
              </div>
              <div id="c-panel" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div id="choose_classifier_box">
                    <div id="use_model_div">
                      <p>Train and display results for a model: {{ wizard.form.use_model }}</p>
                      <p>NOTE: If you uncheck this option, you cannot use Active Learning</p>
                      <br />
                    </div>
                    <div id="classifier_radios">
                      <p>Choose the classification algorithm used by active learning algorithms and for general prediction.</p>
                      {% for radio2 in wizard.form.classifier %}
                      <div class="choose_classifier" name="classifier_choice" id="{{radio2.value}}">
                        {{radio2}}
                      </div>
                      {% endfor %}
                    </div>
                    <p>{{ wizard.form.classifier.errors }}</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h5 class="panel-title">
                  <a data-toggle="collapse" href="#irr-panel" class="accordion-toggle">
                    Inter-rater Reliability (IRR) Settings
                  </a>
                </h5>
              </div>
              <div id="irr-panel" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div id = "choose_irr_or_not">
                    <p>Under IRR, a certain percentage of the data is labeled by
                      multiple coders. The project admin can then examine the
                      consistency of the labels across different coders. The options
                      below allow you to set what percentage of the data is coded
                      multiple times, and how many coders must code data designated
                      for IRR before it is analyzed.
                    </p>
                    {{ wizard.form.use_irr }} Use Inter-rater Reliability
                  </div>
                  <div id="IRR_options">
                    Percent of batch marked IRR (must be between 0 and 100):{{ wizard.form.percentage_irr }}%
                    <br />
                    Number of coders needed (minimum of 2): {{ wizard.form.num_users_irr }}
                  </div>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h5 class="panel-title">
                  <a data-toggle="collapse" href="#b-panel" class="accordion-toggle">
                    Batch Settings
                  </a>
                </h5>
              </div>
              <div id="b-panel" class="panel-collapse collapse in">
                <div class="panel-body">
                  <div id="use_default_size">
                    Use default size (10 times the number of labels): {{ wizard.form.use_default_batch_size}}
                  </div>
                  <div id="choose_batch_size">
                    Batch size (must be between 10 and 1000): {{ wizard.form.batch_size}}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="wizard_nav_bar">
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="project">1. Info</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="labels">2. Labels</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="permissions">3. Permissions</button>
            <input class="btn btn-primary" type="submit" value="Next Step"/>
            <p class="pull-right">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts_body %}
<script type="text/javascript">
/*
 *  Custom code to handle what options are shown on page load and on option selection
 */
var methods_box = $('div#choose_method_box');
var irr_box = $('div#IRR_options');
var batch_field = $('#choose_batch_size');
var use_model = $('#use_model_div');
var class_choice = $('#classifier_radios');
var al_tab = $('#al_tab');

if ($('input#id_advanced-use_irr').prop('checked') == true) {
  irr_box.show();
} else {
  irr_box.hide();
}
if ($('input#id_advanced-use_active_learning').prop('checked') == true) {
  methods_box.show();
  use_model.hide();
} else {
  methods_box.hide();
  use_model.show();
}

if ($('input#id_advanced-use_default_batch_size').prop('checked') == true) {
  batch_field.hide();
} else {
  batch_field.show();
}

if ($('input#id_advanced-use_model').prop('checked') == true) {
  class_choice.show();
  al_tab.show();
} else {
  class_choice.hide();
  al_tab.hide();
}

$('input#id_advanced-use_active_learning').change(function() {
  if ($(this).prop('checked') == true) {
    methods_box.show();
    use_model.hide();
  } else {
    methods_box.hide();
    use_model.show();
  }
});

$('input#id_advanced-use_default_batch_size').change(function() {
  if ($(this).prop('checked') == true) {
    batch_field.hide();
  } else {
    batch_field.show();
  }
});

$('input#id_advanced-use_model').change(function() {
  if ($(this).prop('checked') == true) {
    class_choice.show();
    al_tab.show();
  } else {
    class_choice.hide();
    al_tab.hide();
  }
});

$('input#id_advanced-use_irr').change(function() {
  if ($(this).prop('checked') == true) {
    irr_box.show();
  } else {
    irr_box.hide();
  }
});
</script>
{% endblock %}
